<template >
  <div class="mainDiv"  >
    <div style="display:block;width:100%;min-height:900px;background: url(../../static/images/star-bg.svg) no-repeat;background-size: 100%;" >
    <div style=" margin-top: 0px; margin-left: 0px ; " >
      <svg :width='width' :height='height' @mousemove='listener($event)' fill="#FFFFFF"  >
        <a   @click="toM12Blog" v-for='tag in tags'   style="color: white">
          <text  class="tag"  :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))'  :fill-opacity='((400+tag.z)/600)' >
            {{tag.text}}
          </text>
        </a>
      </svg>
    </div>
  </div>
  </div>
</template>

<script>


  export default {
    name: "index",
    data() {
      return {

        uuid : '',
        input1: '',
        input5: '',
        width: 800,
        height: 800,
        tagsNum: 20,
        RADIUS: 200,
        speedX: Math.PI / 360,
        speedY: Math.PI / 360,
        tags: ["CSS", "Java", "Golang", "Python", "bilibili", "HTML", "JavaScript", "Vue.js", "区块链", "Vue.js", "996.icu", "IRIS",
          "Node.js", "Overwatch", "LOL", "Linux", "No picture", "Kinect", "GitHub", "CS:GO"],

      }
    },

    computed: {
      CX() {
        return this.width / 2;
      },
      CY() {
        return this.height / 2;
      }
    },
    created() {//初始化标签位置
      let tags = [];
      for (let i = 0; i < this.tagsNum; i++) {
        let tag = {};
        let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;
        let a = Math.acos(k);
        let b = a * Math.sqrt(this.tagsNum * Math.PI);
        tag.text = this.tags[i];
        tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);
        tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);
        tag.z = this.RADIUS * Math.cos(a);

        tags.push(tag);
      }
      this.tags = tags;
    },
    mounted() {//使球开始旋转
      setInterval(() => {
        this.rotateX(this.speedX);
        this.rotateY(this.speedY);
      }, 17);
      //this.guid();
    },
    methods: {


      toM12Blog: function () {
        let that = this;
        let formData= new FormData();
        formData.append("passer", that.uuid);
        //console.log("游客id是---|||___",that.uuid)
        that.axios({
          url: '/api/passer',
          method: 'post',
          data: formData,

        }).then(function (response) {
          if(response.status  === 200 ){
            console.log("准备跳转~")
           window.open(   that.$router.resolve({path: '/inspiration'}).href ,'_blank'  );
          }

        })
      },
      toM12Home: function () {
        let that = this;
        that.$router.push({path: '/Home'});
      },
      toM12Insp: function () {
        let that = this;
        that.$router.push({path: '/Inspiration'});
      },

      rotateX(angleX) {
        var cos = Math.cos(angleX);
        var sin = Math.sin(angleX);
        for (let tag of this.tags) {
          var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;
          var z1 = tag.z * cos + (tag.y - this.CY) * sin;
          tag.y = y1;
          tag.z = z1;
        }
      },
      rotateY(angleY) {
        var cos = Math.cos(angleY);
        var sin = Math.sin(angleY);
        for (let tag of this.tags) {
          var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
          var z1 = tag.z * cos + (tag.x - this.CX) * sin;
          tag.x = x1;
          tag.z = z1;
        }
      },
      listener(event) {//响应鼠标移动
        var x = event.clientX - this.CX;
        var y = event.clientY - this.CY;
        this.speedX = x * 0.0001 > 0 ? Math.min(this.RADIUS * 0.00002, x * 0.0001) : Math.max(-this.RADIUS * 0.00002, x * 0.0001);
        this.speedY = y * 0.0001 > 0 ? Math.min(this.RADIUS * 0.00002, y * 0.0001) : Math.max(-this.RADIUS * 0.00002, y * 0.0001);
      }
    }
  }
</script>

<style scoped>
  .mainDiv{
    background-color: #24292e;
    height: 100%;
    width: 100%;
    position:absolute;
    top: 0px;
    left: 0px;
  }
.tag{
  font-size:15px;

}



</style>
